<template>
    <div class="footer">
        <div class="title">
            <div class="titleContent">
                <span>健康才是最宝贵的财富，生命比一切成功更重要，我们是您身边的健康顾问。</span>
                <div class="contact">
                    联系我们
                </div>
            </div>
        </div>
        <div class="content">
            <div class="content-detail">
                <el-row :gutter="52">
                    <el-col :span="8">
                        <div class="grid-content">
                            <p>联系我们 / CONTACT US</p>
                            <ul class="info">
                                <li><i class="iconfont icon-dianhua"></i> 电话：001-832-805-9900</li>
                                <li><i class="iconfont icon-youxiang"></i> 邮箱：001-832-805-9900</li>
                                <li><i class="iconfont icon-wangzhan"></i> 网站：001-832-805-9900</li>
                                <li><i class="iconfont icon-site-copy"></i> 地址：001-832-805-9900</li>
                            </ul>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content">
                            <p>关注我们 / FOCUS US</p>
                            <ul class="code">
                                <li>
                                    <img src="../../common/images/code.jpg">
                                    <p>官方服务号</p>
                                </li>
                                <li>
                                    <img src="../../common/images/code.jpg">
                                    <p>官方订阅号</p>
                                </li>
                            </ul>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content">
                            <p>新闻资讯 / NEWS INFOMATION</p>
                            <router-link v-for="(item,index) in news"
                                         :to="{name:'news',params:{newsid:item.id}}"
                                         :key="index"
                                         tag="div"
                                         class="news">
                                <i class="el-icon-caret-right"></i>
                                <span>{{item.title}}</span>
                                <label>{{item.time|fmtDate("yyyy-MM-dd")}}</label>
                            </router-link>
                        </div>
                    </el-col>
                </el-row>
                <div class="copyRight">
                    Copyright © 2009-2011,www.xxxxxx.comAll rights reserved 版权所有 沪ICP备XXXXXX号​
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            news: [
                {
                    'id': 1,
                    'title': '高血压病的危险因素有哪些',
                    'time': 1492141537
                },
                {
                    'id': 2,
                    'title': '高血压病的危险因素有哪些',
                    'time': 1492141537
                },
                {
                    'id': 3,
                    'title': '高血压病的危险因素有哪些',
                    'time': 1492141537
                },
                {
                    'id': 3,
                    'title': '高血压病的危险因素有哪些',
                    'time': 1492141537
                },
                {
                    'id': 3,
                    'title': '高血压病的危险因素有哪些',
                    'time': 1492141537
                }
            ]
        }
    }
}
</script>

<style lang="less">
@import '../../common/iconfont/iconfont.css';
.footer {
    width: 100%;
    margin: 0 auto;
    .title {
        padding: 20px 40px;
        text-align: left;
        height: 35px;
        line-height: 35px;
        background-color: #01a3c9;
        .titleContent {
            width: 1336px;
            margin: 0 auto;
            span {
                color: #fff;
                font-size: 16px;
            }
            .contact {
                text-align: center;
                float: right;
                background-color: #55b253;
                border: 2px solid #fff;
                width: 140px;
                border-radius: 20px;
                color: #fff;
                padding: 5px;
                line-height: 25px;
                margin-right: 70px;
                cursor: pointer;
            }
        }
    }
    .content {
        background-color: #393d46;
        padding: 20px 40px;
        text-align: left;
        .content-detail {
            width: 1336px;
            margin: 0 auto;
            .el-row {
                margin-bottom: 20px;
                margin-bottom: 0;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .el-col {
                border-radius: 4px;
            }
            .grid-content {
                border-radius: 4px;
                min-height: 240px;
                p {
                    color: #fff;
                    font-size: 14px;
                }
                .info {
                    margin: 0;
                    padding: 0;
                    li {
                        color: #fff;
                        list-style: none;
                        font-size: 14px;
                        line-height: 2.5;
                    }
                }
                .code:extend(.info) {
                    margin: 0;
                    padding: 0;
                    li {
                        display: inline-block;
                        &:last-child {
                            margin-left: 20px;
                        }
                        text-align: center;
                        img {
                            width: 100px;
                            height: 100px;
                        }
                    }
                }
                .news {
                    font-size: 14px;
                    line-height: 1.8;
                    border-bottom: 1px dotted #fff;
                    cursor: pointer;
                     :hover {
                        color: #01a3c9;
                    }
                    i {
                        color: #fff;
                    }
                    span,
                    label {
                        color: #fff;
                    }
                    label {
                        float: right;
                    }
                }
            }
            .row-bg {
                padding: 10px 0;
                background-color: #f9fafc;
            }
            .copyRight {
                color: #fff;
                text-align: center;
                font-size: 14px;
            }
        }
    }
}
</style>